<template>
	<!-- 操作栏 -->
	<el-input placeholder="请输入品牌" v-model="searchBrand" :value="searchBrand"  @keyup.enter="search"></el-input>
	<el-input placeholder="请输入香型" v-model="searchFlavor" :value="searchFlavor" @keyup.enter="search"></el-input>
	<el-input placeholder="请输入酒精度" v-model="searchVol" :value="searchVol" @keyup.enter="search"></el-input>
	<el-button class="searchBtn" type='info' :icon="Search" @click="search">搜索</el-button>
	<!-- 分类 -->
	<div class="list">
	    <div class="brand sonlist">
	        <h3>品牌:</h3>
			<div style="width:70%;margin-left: 5%;">
				<span v-for="(x, index) in BrandList" :key="index" class="sections brands" :id="[x.redFlagForBrand==true ? 'redbg':'']" @click="getbrandid(x)">{{x.classifyName }}</span>
			</div>
	        <div class="btn">
	            <el-button type="primary" @click="brandflag = true" v-if="addbrandflag" class="addbtn">添加</el-button>
	            <el-button type="danger" v-if="addbrandflag" @click="delbrandbox" class="delbtn">删除</el-button>
	            <el-button v-if="delbrandflag" type="danger" @click="delbrand" class="addbtn">确定</el-button>
	            <el-button v-if="delbrandflag" type="primary" @click="backbrand" class="delbtn">取消</el-button>
	        </div>
	    </div>
	    <div class="flavor sonlist">
	        <h3>香型:</h3>
			<div style="width:70%;margin-left: 5%;">
				<span v-for="(x, index) in FlavorList" :key="index" class="sections flavors" :id="[x.redFlagForFlavor==true ? 'redbg':'']" @click="getflavorid(x)">{{x.classifyName }}</span>
			</div>
	        <div class="btn">
	            <el-button type="primary" @click="flavorflag = true" v-if="addflavorflag" class="addbtn">添加</el-button>
	            <el-button type="danger" v-if="addflavorflag" @click="delflavorbox" class="delbtn">删除</el-button>
	            <el-button v-if="delflavorflag" type="danger" class="addbtn" @click="delflavor">确定</el-button>
	            <el-button v-if="delflavorflag" type="primary" @click="backflavor" class="delbtn">取消</el-button>
	        </div>
	    </div>
	    <div class="proof sonlist">
	        <h3>酒精度:</h3>
			<div style="width:70.3%;margin-left: 3%;">
				<span v-for="(x, index) in VolList" :key="index" class="sections proofs" :id="[x.redFlagForProof==true ? 'redbg':'']" @click="getproofid(x)">{{x.classifyName }}</span>
			</div>
	        <div class="btn">
	            <el-button type="primary" @click="proofflag = true" v-if="addproofflag" class="addbtn">添加</el-button>
	            <el-button type="danger" v-if="addproofflag" @click="delproofbox" class="delbtn">删除</el-button>
	            <el-button v-if="delproofflag" type="danger" class="addbtn" @click="delproof">确定</el-button>
	            <el-button v-if="delproofflag" type="primary" @click="backproof" class="delbtn">取消</el-button>
	        </div>
	    </div>
	</div>
	<el-dialog title="添加品牌" v-model="brandflag" class="addbox" width="30%" center>
	    <div>
	        品牌：
	        <el-input placeholder="请添加品牌" v-model="inpbrand" @keyup.enter="addbrand"></el-input>
	    </div>
	    <span slot="footer" class="dialog-footer">
	        <el-button type="primary" @click="addbrand">确 定</el-button>
	        <el-button @click="brandflag = false, inpbrand = ''">取 消</el-button>
	    </span>
	</el-dialog>
	<el-dialog title="添加香型" v-model="flavorflag" class="addbox" width="30%" center>
	    <div>
	        香型：
	        <el-input placeholder="请添加香型" v-model="inpflavor" @keyup.enter="addflavor"></el-input>
	    </div>
	    <span slot="footer" class="dialog-footer">
	        <el-button type="primary" @click="addflavor">确 定</el-button>
	        <el-button @click="flavorflag = false, inpflavor = ''">取 消</el-button>
	    </span>
	</el-dialog>
	<el-dialog title="添加酒精度" v-model="proofflag" class="addbox" width="30%" center>
	    <div>
	        酒精度：
	        <el-input placeholder="请添加酒精度" v-model="inpproof" @keyup.enter="addproof"></el-input>
	    </div>
	    <span slot="footer" class="dialog-footer">
	        <el-button type="primary" @click="addproof">确 定</el-button>
	        <el-button @click="proofflag = false, inpproof = ''">取 消</el-button>
	    </span>
	</el-dialog> 
</template>

<script setup lang="ts">
	// el组件
	import { ElMessage, ElMessageBox} from 'element-plus';
	import {Search} from '@element-plus/icons-vue'
	// 接口
	import {getClassification,addClassification,delClassification} from "../api/wqj/index"
	// ref等相关
	import { ref,shallowRef,reactive ,onMounted} from 'vue';
	// 路由
	import { useRouter } from 'vue-router';
	let router=useRouter()
	// 自定义
	// 搜索框输入内容
	let searchBrand=ref()//品牌
	let searchFlavor=ref('')//香型 
	let searchVol=ref('')//度数 
	// 添加的input框内容
	let inpbrand=ref()//品牌
	let inpflavor=ref('')//香型 
	let inpproof=ref('')//度数 
	// 数据展示
	let BrandList=ref([])
	let FlavorList=ref([])
	let VolList=ref([])
	// 添加弹窗
	let brandflag=ref(false)
	let flavorflag=ref(false)
	let proofflag=ref(false)
	// 四种类型按钮的显示与隐藏
	let addbrandflag=ref(true)
	let delbrandflag=ref(false)
	let addflavorflag=ref(true)
	let delflavorflag=ref(false)
	let addproofflag=ref(true)
	let delproofflag=ref(false)
	// 删除--red
	let redFlagForBrand=ref(false)
	let redFlagForFlavor=ref(false)
	let redFlagForProof=ref(false)
	// 分类接口--品牌
	const getBrand=async()=>{
		let res=await getClassification({
			classifyType:0
		})
		res.forEach(v=>{
			v.redFlagForBrand=false
		})
		BrandList.value=res
		// console.log("品牌",BrandList.value)
	}
	// 分类接口--香型
	const getflavor=async()=>{
		let res=await getClassification({
			classifyType:1
		})
		res.forEach(v=>{
			v.redFlagForFlavor=false
		})
		FlavorList.value=res
		// console.log("香型",FlavorList.value)
	}
	// 分类接口--酒精度
	const getVol=async()=>{
		let res=await getClassification({
			classifyType:2
		})
		res.forEach(v=>{
			v.redFlagForProof=false
		})
		VolList.value=res
		// console.log("酒精度",VolList.value)
	}
	// 搜索(待完善)
	const search=()=>{
		router.push("/goodsManage?message=0&brand=" + searchBrand.value + "&flavor=" + searchFlavor.value + "&proof=" + searchVol.value)
	}
	// 点击对话框的确定按钮
	const addbrand=async()=>{//添加品牌
		if(inpbrand.value!=''){
			let res=await addClassification({
				classifyType:String(0),
				classifyName:inpbrand.value
			})
			if(res==undefined){
				ElMessage.success('品牌添加成功')
				inpbrand.value=''
				getBrand()
				brandflag.value=false
			}
		}else{
			ElMessage.error('品牌不能为空')
		}
	}
	const addflavor=async()=>{//添加香型
		if(inpflavor.value!=''){
			let res=await addClassification({
				classifyType:String(1),
				classifyName:inpflavor.value
			})
			if(res==undefined){
				ElMessage.success('香型添加成功')
				inpflavor.value=''
				getflavor()
				flavorflag.value=false
			}
		}else{
			ElMessage.error('香型不能为空')
		}
	}
	const addproof=async()=>{//添加酒精度
		if(inpproof.value!=''){
			let res=await addClassification({
				classifyType:String(2),
				classifyName:inpproof.value
			})
			if(res==undefined){
				ElMessage.success('酒精度添加成功')
				inpproof.value=''
				getVol()
				proofflag.value=false
			}
		}else{
			ElMessage.error('酒精度不能为空')
		}
	}
	// 品牌删除
		// 点击删除按钮，所有标签底色变为灰色
		const delbrandbox=()=>{
			// 按钮变为确定,取消
			addbrandflag.value = false;
			delbrandflag.value = true;
			// DOM操作获取所有品牌
			var Brands=document.querySelectorAll(".brands")
			// var BrandsById=document.querySelectorAll("#redbg")
			if(addbrandflag.value == false && delbrandflag.value == true){
				for(var i=0;i<Brands.length;i++){
					Brands[i].setAttribute("class","cccbg sections brands")
				}
			}
		}
		// 点击取消,所有按钮底色消失
		const backbrand=()=>{
			// 按钮变为添加,删除
			addbrandflag.value = true;
			delbrandflag.value = false;
			var Brands=document.querySelectorAll(".brands")
			if(addbrandflag.value == true && delbrandflag.value == false){
				for(var i=0;i<Brands.length;i++){
					Brands[i].setAttribute("class","sections brands")
				}
				BrandList.value.forEach(v=>{
					v.redFlagForBrand=false
					// console.log("v.redFlagForBrand",v.redFlagForBrand)
				})
			}
		}
		// 点击单个标签,底色变红,再次点击,取消选择
		const getbrandid=(item)=>{
			let brandid = item.classifyId
			let brandname = item.classifyName
			if(addbrandflag.value == true){
				router.push('/goodsManage?message=0&brand='+brandname)
			}else{
				if(addbrandflag.value == false && delbrandflag.value == true && item.redFlagForBrand== false){
					item.redFlagForBrand=true
				}else if(addbrandflag.value == false && delbrandflag.value == true && item.redFlagForBrand == true){
					item.redFlagForBrand=false
				}
				// console.log("redFlagForBrand",item.redFlagForBrand)
			}		
		}
		// 确认删除
		const delbrand=async()=>{
			var classifyIds=[]//待删除的品牌
			// 将选中的品牌添加到待删除数组中
			BrandList.value.forEach(v=>{
				if(v.redFlagForBrand==true){
					classifyIds.push(v.classifyId)	
				}
			})
			if(classifyIds.length!=0){
				let res=await delClassification({
					classifyIds:classifyIds
				})
				// console.log("删除接口返回结果",res)
				if(res==undefined){
					ElMessage.success('品牌删除成功')
					getBrand()
					backbrand()
				}
			}
		}
	// 香型删除
		// 点击删除按钮，所有标签底色变为灰色
		const delflavorbox=()=>{
			// 按钮变为确定,取消
			addflavorflag.value = false;
			delflavorflag.value = true;
			// DOM操作获取所有品牌
			var Flavors=document.querySelectorAll(".flavors")
			if(addflavorflag.value == false && delflavorflag.value == true){
				for(var i=0;i<Flavors.length;i++){
					Flavors[i].setAttribute("class","cccbg sections flavors")
				}
			}
		}
		// 点击取消,所有按钮底色消失
		const backflavor=()=>{
			// 按钮变为添加,删除
			addflavorflag.value = true;
			delflavorflag.value = false;
			var Flavors=document.querySelectorAll(".flavors")
			if(addflavorflag.value == true && delflavorflag.value == false){
				for(var i=0;i<Flavors.length;i++){
					Flavors[i].setAttribute("class","sections flavors")
				}
				FlavorList.value.forEach(v=>{
					v.redFlagForFlavor=false
					console.log("v.redFlagForFlavor",v.redFlagForFlavor)
				})
			}
		}
		// 点击单个标签,底色变红,再次点击,取消选择
		const getflavorid=(item)=>{
			let flavorid = item.classifyId
			let flavorname = item.classifyName
			if(addflavorflag.value == true){
				router.push('/goodsManage?message=0&flavor='+flavorname)
			}else{
				if(addflavorflag.value == false && delflavorflag.value == true && item.redFlagForFlavor== false){
					item.redFlagForFlavor=true
				}else if(addflavorflag.value == false && delflavorflag.value == true && item.redFlagForFlavor == true){
					item.redFlagForFlavor=false
				}
				console.log("redFlagForFlavor",item.redFlagForFlavor)
			}
		}
		// 确认删除
		const delflavor=async()=>{
			var classifyIds=[]//待删除的品牌
			// 将选中的品牌添加到待删除数组中
			FlavorList.value.forEach(v=>{
				if(v.redFlagForFlavor==true){
					classifyIds.push(v.classifyId)	
				}
			})
			if(classifyIds.length!=0){
				let res=await delClassification({
					classifyIds:classifyIds
				})
				// console.log("删除接口返回结果",res)
				if(res==undefined){
					ElMessage.success('香型删除成功')
					getflavor()
					backflavor()
				}
			}
		}
	// 酒精度删除
		// 点击删除按钮，所有标签底色变为灰色
		const delproofbox=()=>{
			// 按钮变为确定,取消
			addproofflag.value = false;
			delproofflag.value = true;
			// DOM操作获取所有品牌
			var Proofs=document.querySelectorAll(".proofs")
			if(addproofflag.value == false && delproofflag.value == true){
				for(var i=0;i<Proofs.length;i++){
					Proofs[i].setAttribute("class","cccbg sections proofs")
				}
			}
		}
		// 点击取消,所有按钮底色消失
		const backproof=()=>{
			// 按钮变为添加,删除
			addproofflag.value = true;
			delproofflag.value = false;
			var Proofs=document.querySelectorAll(".proofs")
			if(addproofflag.value == true && delproofflag.value == false){
				for(var i=0;i<Proofs.length;i++){
					Proofs[i].setAttribute("class","sections proofs")
				}
				VolList.value.forEach(v=>{
					v.redFlagForProof=false
					// console.log("v.redFlagForProof",v.redFlagForProof)
				})
			}
		}
		// 点击单个标签,底色变红,再次点击,取消选择
		const getproofid=(item)=>{
			let proofid = item.classifyId
			let proofname = item.classifyName
			if(addproofflag.value == true){
				router.push('/goodsManage?message=0&proof='+proofname)
			}else{
				if(addproofflag.value == false && delproofflag.value == true && item.redFlagForProof== false){
					item.redFlagForProof=true
				}else if(addproofflag.value == false && delproofflag.value == true && item.redFlagForProof == true){
					item.redFlagForProof=false
				}
				console.log("redFlagForProof",item.redFlagForProof)
			}
		}
		// 确认删除
		const delproof=async()=>{
			var classifyIds=[]//待删除的品牌
			// 将选中的品牌添加到待删除数组中
			VolList.value.forEach(v=>{
				if(v.redFlagForProof==true){
					classifyIds.push(v.classifyId)	
				}
			})
			if(classifyIds.length!=0){
				let res=await delClassification({
					classifyIds:classifyIds
				})
				// console.log("删除接口返回结果",res)
				if(res==undefined){
					ElMessage.success('酒精度删除成功')
					getVol()
					backproof()
				}
			}
		}
	// 挂载
	onMounted(()=>{
		getBrand()
		getflavor()
		getVol()
	})
</script>

<style scoped lang="less">
	// #redone{
	// 	background-color: red;
	// }
	.el-input{
		width: 150px;
		margin-right: 10px;
		border: none;
	}
	.searchBtn{
		background-color: #106ab1;
		border: none;
	}
	.addBtn{
		background-color: #00a0e9;
		border: none;
		float: right;
		margin-right: 20px;
	}
	
	.list {
	    width: 80vw;
	    height: 65px;
	    margin-bottom: 15px;
	    margin-left: 35px;
	    .sonlist {
	        position: relative;
	        margin: 50px 0px;
	        white-space: pre-wrap;
			display: flex;
	        .sections {
				width: 100px;
	            padding: 3px 10px;
	            border-radius: 3px;
	            margin: 0px 30px;
				margin-bottom: 15px;
	            display: inline-block;
	            white-space: pre-wrap;
	            cursor: pointer;
	        }
	
	        .cccbg {
	            background: #dddddd;
	        }
	
	        #redbg {
	            background: #ff6363;
				color:white;
				font-weight: 600;
	        }
			#whitebg{
				background: white;
			}
	
	        .btn {
				display: flex;
	            float: right;
	        }
	    }
	    h3{
			display: inline-block;
	    }
	}
	.addbox {
		.el-input{
			width: 80%;
		}
	    .dialog-footer{
	    	width: 100%;
	    	display: flex;
	    	justify-content: center;
	    	margin-top: 10%;
	    }
	}
</style>